import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts';
var ColorArr = [[0.8, '#70D7FF'], [1, 'orange']]
class LeftCenter2 extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            disList: {},
            value: 0,
        }

    }

    componentDidMount() {
        // request({
        //     url: `/web/redstar/cockpitport/overallProjectProgress`,
        //     method: 'POST',
        //     data: {}

        // }).then(data => {
        //     // console.log(data)
        //     if(data.rc === 0) {
        //         this.setState({
        //             soil:data.ret.soil
        //         })
        //     }
        // })
    }


    setOption = () => {
        let soil = this.props.soil
        var ColorArr = [[(100 - soil)/100, '#004C58'], [1, '#00C3CC']]
        return {
            //  backgroundColor:'#333333',
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                //第一个图表
                {
                name: "仪盘表",
                type: "gauge",
                splitNumber: 20,
                radius: '75%',
                startAngle: 90,
                endAngle: -269,
                clockwise: true,
                axisLine: {
                    "lineStyle": {
                        "color": [
                            ...ColorArr
                        ],

                        width: 10,
                        opacity: 1,
                    },
                    show: true,
                    length: 10
                },
                axisTick: {
                    lineStyle: {
                        // color:'rgb(51, 51, 51)',
                        color: '#0D202E',
                        width: 4,
                        opacity: 1
                    },
                    length: 10,
                    splitNumber: 1,

                },
                pointer: {           // 分隔线
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10,
                    show: false
                },
                axisLabel: {
                    // distance: 10,
                    // textStyle: {
                    //     color: "#fff"
                    // },
                    show: false,
                },
                splitLine: {
                    "show": false
                },
              
                // itemStyle: {
                //     normal: {
                //         color: "#494f50"
                //     }
                // },
                detail: {
                    formatter: "{value}%",
                    offsetCenter: [0, "0%"],
                    textStyle: {
                        fontSize: 20,
                        color: "#70D7FF"
                    }
                },
                title: {
                    offsetCenter: [0, "50%"]
                },
                data: [{

                    value: soil
                }]
            },
            {
                name: '外圈圆',
                type: 'gauge',
                startAngle: 180,
                endAngle: -179.9,
                radius: '90%',
                splitNumber: 35,
                center: ['50%', '50%'],
                axisLabel: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 3,
                        color: [[0, '#70D7FF'], [1, '#70D7FF']]
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                pointer: {
                    show: false
                },
                detail: {
                    show: false
                },
                // data: [{value: 50, name: '00'}]
            },
           
            //第二个图表
           
            ]
        };



    }

    render() {

        return (

            <Chart option={this.setOption()} notMerge lazyUpdate style={{ height: "100%", width: "100%", float: "left" }}
                echartsInstance={this.save}
            />




        );
    }

}

export default LeftCenter2;
